import React, { useEffect, useState } from 'react'
import './FilterBar.css'


const FilterBar = (props) => {
    // console.log(props,'filter');
    const {FilterSecond=[],FilterFirst=[],NameIndex=[] ,select,select2,setSelect,setSelect2} = props
    
    // const [select3,setSelect3] = useState(0);
    return (
        // <div className='loading'></div>
    <div className="filter_main">
    <div className="filter_first">
        {
            FilterFirst.map((item,index)=>{
                return(
                    <div className={`select ${select ==index ? "isSelect": "" }`} key={index} onClick={setSelect.bind(this,index)}>
                        {item.name}
                    </div>
                )
            })
            

        }
        
    </div>
    <div className="filter_second">
        {
            FilterSecond.map((item,index)=>{
                return(
                    <div className={`select ${select2 ==index ? "isSelect": "" }`} key={index} onClick={setSelect2.bind(this,index)}>
                        {item.name}
                    </div>
                )
            })
            

        }
        
    </div>
    {/* <div className="filter_third">
        {
            NameIndex.map((item,index)=>{
                return(
                    <div className={`select_letter ${select3 ==index ? "isSelect": "" }`} key={index} onClick={setSelect3.bind(this,index)}>
                        {item.name}
                    </div>
                )
            })
            

        }
        
    </div> */}
    </div>
    )
}

export default FilterBar